<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天视频</title>
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script src="../js/socket.io.js"></script>
    <script src="../js/adapter-latest.js"></script>
    <style type="text/css">
        video {
            height: 260px;
            width: 100%;
            background-color: black;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="col-sm-12" style="text-align: center; margin-bottom: 30px">
    <h2>一对一聊天</h2>
</div>
<div class="col-sm-5" style="padding-left: 30px; margin-bottom: 15px;">
    <div class="input-group">
        <label class="input-group-addon" for="userName">用户名：</label>
        <input id="userName" type="text" class="form-control">
    </div>
</div><!-- /.col-lg-6 -->

<div class="col-sm-12">
    <div class="col-sm-7">
        <div id="context" class="col-sm-12"
             style=" height: 520px; border: 1px solid #6d666e; border-radius:5px; margin-bottom: 10px; padding: 10px 5px;overflow-y: auto;">
        </div>
        <div class="col-sm-12">
            <div class="input-group">
                <input id="dataMsg" type="text" class="form-control">
                <label for="dataMsg" class="input-group-btn">
                    <button id="sendData" class="btn btn-success" type="button">
                        发送
                    </button>
                </label>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div>
    <div class="col-sm-5">
        <div class="col-sm-12">
            <video id="localVideo" autoplay playsinline></video>
        </div>
        <div class="col-sm-12" style="height: 40px;">
            <div class="col-sm-4" style="text-align: center;">
                <button id="conn" class="btn btn-success">连接</button>
            </div>
            <div class="col-sm-4" style="text-align: center;">
                <label for="shareDesk"><input id="shareDesk" type="checkbox"/> Desktop</label>
            </div>
            <div class="col-sm-4" style="text-align: center;">
                <button id="leave" class="btn btn-danger">挂断</button>
            </div>
        </div>
        <div class="col-sm-12">
            <video id="remoteVideo" autoplay playsinline></video>
        </div>
    </div>
    <div class="col-sm-12" style="display: none;">
        <div class="col-sm-6">
            <div class="col-sm-12" style="text-align: center;">
                <label for="offer">Local：</label>
            </div>
            <textarea id="offer" style="width: 100%; height: 200px; resize:none;" disabled></textarea>
        </div>
        <div class="col-sm-6">
            <div class="col-sm-12" style="text-align: center;">
                <label for="answer">Remote：</label>
            </div>
            <textarea id="answer" style="width: 100%; height: 200px; resize:none;" disabled></textarea>
        </div>
    </div>
</div>
<script src="../js/main.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>